<template>
    <div class="calendarBody light">
        <div class="calendar">
            <div class="calendar-header">
                <span class="month-picker" id="month-picker">February</span>
                <div class="year-picker">
                    <span class="year-change" id="prev-year">
                        <pre>《</pre>
                    </span>
                    <span id="year">2021</span>
                    <span class="year-change" id="next-year">
                        <pre>》</pre>
                    </span>
                </div>
            </div>
            <div class="calendar-body">
                <div class="calendar-week-day">
                    <div>周日</div>
                    <div>周一</div>
                    <div>周二</div>
                    <div>周三</div>
                    <div>周四</div>
                    <div>周五</div>
                    <div>周六</div>
                </div>
                <div class="calendar-days"></div>
            </div>
            <div class="calendar-footer">
                <div class="toggle">
                    <span>夜间模式</span>
                    <div class="dark-mode-switch">
                        <div class="dark-mode-switch-ident"></div>
                    </div>
                </div>
            </div>
            <div class="month-list"></div>
        </div>
    </div>
</template>
<script>
    import calendarJs from '@/assets/js/calendar'
    export default{
        name:'CalendarVue',
        mounted(){
            calendarJs()
        },
    }
</script>
<style src="../assets/css/calendar.css">
</style>